  
<!-- 用户管理模块,2018-12-14,作者:zc-->
<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-tickets"></i>
                    用户管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container" v-loading="listLoading">
            <!-- 搜索区-->
            <div class="handle-box"> 
                <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                   <el-form :inline="true"    class="demo-form-inline" >
                        <el-form-item label="用户ID">
                            <el-input v-model="search.userid" style=""  placeholder="用户ID" size="mini"></el-input>
                        </el-form-item>
                        <el-form-item label="用户名称">
                            <el-input v-model="search.username" placeholder="用户名称" size="mini"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary"   round icon="el-icon-search">搜索</el-button>                           
                        </el-form-item>
                    </el-form>
                </el-col>
            </div>
              <!--新增按钮-->
               <template>                             
                   <div class="btn">
                        <el-button type="success" icon="el-icon-circle-plus-outline" @click="handleAdd" size="mini" round>新增</el-button>      
                        <el-button type="danger" icon="el-icon-delete" @click="handleDeleteList" size="mini" round>删除</el-button>
                   </div>
               </template>              
                <template>
                     <!-- 表格 -->
                    <el-table :data="tabbleDta" border   style="width:100%">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="userid" label="用户ID">
                        </el-table-column>
                        <el-table-column prop="username" label="用户名称">
                        </el-table-column>
                        <el-table-column prop="phone" label="手机号">
                        </el-table-column>
                        <el-table-column prop="addtime" label="添加时间">
                        </el-table-column>
                        <el-table-column  fixed="right" label="操作" width="150">
                            <template slot-scope="scope">
                                <el-button size="small" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
                                <el-button size="small" @click="handleEdit(scope.$index,scope.row)">删除</el-button>
                            </template>
                        </el-table-column>           
                    </el-table>
                    <div class="pagination">   
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="100"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                        </el-pagination>
                    </div>
                </template>  
        </div>
         <!-- 添加 -->
        <useradds ref="users"></useradds>
         
    </div>
</template>

<script>

import  useradds from './userAdd';

export default {
    
    data(){
        return{
            // 列表数据
            tabbleDta:[],
            // 列表Loading加载
            listLoading: true,
            search:{},
            currentPage:0,
            pageSize:10,
            total:0
        }
    },
    mounted(){
    this.listLoading = true;
     //初始化加载数据
    this.getResult();

    },
    methods:{
       
        getTableData(){

           // this.tabbleDta =this.tabbleDta.slice()
        },
        // 获取列表数据
        getResult(){
           var _this = this;
           _this.$api.getUser().then((res)=>{
                _this.listLoading = false;
               if(res.result =='ok'){
                    _this.tabbleDta = res.data;
               }    
           }).catch((err)=>{
               _this.$message({
                   message:'数据获取失败',
                   type:'error'
               });
           });
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        // 修改用户
        handleEdit(){

        },
        // 添加用户
        handleAdd(){
              this.showDialog("用户添加");
            
        },
        // 删除
        handleDeleteList(){

        },
        showDialog(title){
             this.$refs['users'].Visible =true;
             this.$refs['users'].title = title;
        }
    },components:{
        useradds
    }
}
</script>

<style scoped>
 
    .btn{
        margin-bottom: 1rem;
    }
</style>
 